<template>
    <div class="asset-content">
        <div class="title">
            <h3>资产盘点<span>Asset counting</span></h3>
        </div>
        <!-- 下拉框 -->
        <div class="cascader">
            <a-cascader style="margin-top: 1rem" :options="options" placeholder="所有" @change="onCascader">
                <a-icon slot="suffixIcon" type="down" class="test" />
            </a-cascader>
        </div>
        <!-- 饼图 -->
        <div id="chart" class="chart"></div>
        <!-- 设备分类 -->
        <swiper :options="swiperOption">
            <swiper-slide class="goods-content" v-for="(page, index) in pages" :key="index">
                <div class="goods-item" v-for="(item, index) in page" :key="index">
                    <div class="goods-img" :class="item.imgbg">
                        <img :src="item.icon" draggable="false" />
                    </div>
                    <div class="goods-text">
                        <p>{{ item.typeStr }}</p>
                        <span>{{ item.count }}</span>
                    </div>
                </div>
            </swiper-slide>
        </swiper>
        <div class="swiper-pagination goods-pagination"></div>
        <!-- 设备信息 -->
        <div v-if="searchData.length > 0">
            <div class="equipment" v-show="iseqclose">
                <div class="eq-title">
                    <font-awesome-icon class="icon-tag icon" :icon="['fas', 'tag']" />
                    <h3>{{ deviceInfo.type_dictText }}</h3>
                    <i class="close" @click="eqclose">
                        <font-awesome-icon class="icon-times" :icon="['fas', 'times']"
                    /></i>
                </div>
                <div class="eq-content">
                    <ul>
                        <li>
                            资产编号：
                            <input
                                type="text"
                                class="form-control"
                                autofocus
                                ref="userName"
                                v-model="deviceInfo.member"
                            />
                        </li>
                        <li>
                            资产类型：
                            <a-select v-model="deviceInfo.type_dictText" style="color: #fff">
                                <a-select-option value="电脑">电脑</a-select-option>
                                <a-select-option value="办公桌">办公桌</a-select-option>
                                <a-select-option value="档案柜">档案柜</a-select-option>
                                <a-select-option value="保险柜">保险柜</a-select-option>
                                <a-select-option value="椅子">椅子</a-select-option>
                            </a-select>
                        </li>
                        <li>
                            价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：
                            <input
                                type="text"
                                class="form-control"
                                autofocus
                                ref="userName"
                                v-model="deviceInfo.price"
                            />
                        </li>
                        <li>
                            状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：
                            <a-select
                                v-model="deviceInfo.status_dictText"
                                :style="{ color: deviceInfo.status_dictText === '正常' ? '#66c59d' : '#ec808d' }"
                                @change="selectChange"
                            >
                                <a-select-option value="正常">正常</a-select-option>
                                <a-select-option value="异常">异常</a-select-option>
                            </a-select>
                        </li>
                        <li>
                            品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;牌：
                            <input type="text" class="form-control" v-model="deviceInfo.brand" />
                        </li>
                        <li>
                            朝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向：
                            <a-select v-model="deviceInfo.direction" style="color: #fff">
                                <a-select-option value="东">东</a-select-option>
                                <a-select-option value="南">南</a-select-option>
                                <a-select-option value="西">西</a-select-option>
                                <a-select-option value="北">北</a-select-option>
                            </a-select>
                        </li>
                        <li>
                            管&nbsp;&nbsp;理&nbsp;&nbsp;人：
                            <input type="text" class="form-control" v-model="deviceInfo.admin" />
                        </li>
                        <li>
                            使&nbsp;&nbsp;用&nbsp;&nbsp;人：
                            <input type="text" class="form-control" v-model="deviceInfo.user" />
                        </li>
                        <li>
                            创建日期：
                            <a-date-picker
                                @change="onChange"
                                :allowClear="false"
                                suffix-icon="null"
                                v-model="deviceInfo.reportingTime"
                            />
                        </li>
                        <li>
                            购买日期：
                            <a-date-picker
                                @change="onChange"
                                :allowClear="false"
                                suffix-icon="null"
                                v-model="deviceInfo.purchaseTime"
                            />
                        </li>
                        <li>
                            型号规格：
                            <input type="text" class="form-control" v-model="deviceInfo.spec" />
                        </li>
                        <li>
                            资产位置：
                            <input type="text" class="form-control" v-model="deviceInfo.position" />
                        </li>
                        <li>
                            当前位置：
                            <input type="text" class="form-control" v-model="deviceInfo.aposition" />
                        </li>

                        <li>
                            备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：
                            <input type="text" class="form-control" v-model="deviceInfo.remarks" />
                        </li>
                    </ul>
                    <div class="eq-btn">
                        <div @click="eqBaocun(deviceInfo)">
                            <a><font-awesome-icon class="icon" :icon="['fas', 'save']" />保存</a>
                        </div>
                        <div class="eq-remove">
                            <a-button type="dashed" @click="eqRemove(deviceInfo.id)">
                                <font-awesome-icon class="icon" :icon="['fas', 'trash-alt']" />删除
                            </a-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-else>
            <div class="equipment" v-show="iseqclose">
                <div class="eq-title">
                    <font-awesome-icon class="icon-tag icon" :icon="['fas', 'tag']" />
                    <h3>{{ deviceInfo.type_dictText }}</h3>
                    <i class="close" @click="eqclose">
                        <font-awesome-icon class="icon-times" :icon="['fas', 'times']"
                    /></i>
                </div>
                <div class="eq-content">
                    <ul>
                        <li>
                            资产编号：
                            <input
                                type="text"
                                class="form-control"
                                autofocus
                                ref="userName"
                                v-model="deviceInfo.member"
                            />
                        </li>
                        <li>
                            资产类型：
                            <a-select v-model="deviceInfo.type_dictText" style="color: #fff">
                                <a-select-option value="电脑">电脑</a-select-option>
                                <a-select-option value="办公桌">办公桌</a-select-option>
                                <a-select-option value="档案柜">档案柜</a-select-option>
                                <a-select-option value="保险柜">保险柜</a-select-option>
                                <a-select-option value="椅子">椅子</a-select-option>
                            </a-select>
                        </li>
                        <li>
                            价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：
                            <input
                                type="text"
                                class="form-control"
                                autofocus
                                ref="userName"
                                v-model="deviceInfo.price"
                            />
                        </li>
                        <li>
                            状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：
                            <a-select
                                v-model="deviceInfo.status_dictText"
                                :style="{ color: deviceInfo.status_dictText === '正常' ? '#66c59d' : '#ec808d' }"
                                @change="selectChange"
                            >
                                <a-select-option value="正常">正常</a-select-option>
                                <a-select-option value="异常">异常</a-select-option>
                            </a-select>
                        </li>
                        <li>
                            品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;牌：
                            <input type="text" class="form-control" v-model="deviceInfo.brand" />
                        </li>
                        <li>
                            朝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向：
                            <a-select v-model="deviceInfo.direction" style="color: #fff">
                                <a-select-option value="东">东</a-select-option>
                                <a-select-option value="南">南</a-select-option>
                                <a-select-option value="西">西</a-select-option>
                                <a-select-option value="北">北</a-select-option>
                            </a-select>
                        </li>
                        <li>
                            管&nbsp;&nbsp;理&nbsp;&nbsp;人：
                            <input type="text" class="form-control" v-model="deviceInfo.admin" />
                        </li>
                        <li>
                            使&nbsp;&nbsp;用&nbsp;&nbsp;人：
                            <input type="text" class="form-control" v-model="deviceInfo.user" />
                        </li>
                        <li>
                            创建日期：
                            <a-date-picker
                                @change="onChange"
                                :allowClear="false"
                                suffix-icon="null"
                                v-model="deviceInfo.reportingTime"
                            />
                        </li>
                        <li>
                            购买日期：
                            <a-date-picker
                                @change="onChange"
                                :allowClear="false"
                                suffix-icon="null"
                                v-model="deviceInfo.purchaseTime"
                            />
                        </li>
                        <li>
                            型号规格：
                            <input type="text" class="form-control" v-model="deviceInfo.spec" />
                        </li>
                        <li>
                            资产位置：
                            <input type="text" class="form-control" v-model="deviceInfo.position" />
                        </li>
                        <li>
                            当前位置：
                            <input type="text" class="form-control" v-model="deviceInfo.aposition" />
                        </li>

                        <li>
                            备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：
                            <input type="text" class="form-control" v-model="deviceInfo.remarks" />
                        </li>
                    </ul>
                    <div class="eq-btn">
                        <div @click="eqBaocun(deviceInfo)">
                            <a><font-awesome-icon class="icon" :icon="['fas', 'save']" />保存</a>
                        </div>
                        <div class="eq-remove">
                            <a-button type="dashed" @click="eqRemove(deviceInfo.id)">
                                <font-awesome-icon class="icon" :icon="['fas', 'trash-alt']" />删除
                            </a-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 设备表格 -->
        <div class="assets" v-show="isTable">
            <div class="assets-content">
                <h3>一键盘点</h3>
                <div class="search">
                    <input type="text" placeholder="请输入..." @input="searchAction($event)" />
                    <nav class="assets-select">
                        <ul class="select-box">
                            <li class="select-title">
                                <div @click="assetsSelectChage">
                                    <p>{{ selectText }}</p>
                                    <a-icon type="down" class="nav-icon" />
                                </div>
                                <ul class="select-one" v-show="isAssetsSelectOne">
                                    <li
                                        class="select-list"
                                        v-for="(list, index) in Select"
                                        :key="index"
                                        @click="showFoolrInfo($event)"
                                    >
                                        {{ list.floorNum }}
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                </div>
                <div class="statistics">
                    <div>
                        <p class="sum-assets">资产总数</p>
                        <span>{{ sum }}</span>
                    </div>
                    <div>
                        <p class="normal-assets">正常资产</p>
                        <span>{{ newnormal }}</span>
                    </div>
                    <div>
                        <p class="abnormal-assets">异常资产</p>
                        <span>{{ newabnormal }}</span>
                    </div>
                </div>
            </div>
            <table>
                <thead>
                    <tr>
                        <th v-for="(item, i) in theadth" :key="i">{{ item.th }}</th>
                    </tr>
                </thead>
                <div class="tbody" v-if="searchData.length > 0">
                    <ul v-for="(item, i) in searchData" :key="i" @click="showEquipment(i, item)">
                        <li>{{ item.member }}</li>
                        <li>{{ item.type_dictText }}</li>
                        <li>{{ item.position }}</li>
                        <li>{{ item.aposition }}</li>
                        <li>{{ item.user }}</li>
                        <li>{{ item.reportingTime }}</li>
                        <li :class="item.status_dictText === '正常' ? 'normal' : 'abnormal'">
                            {{ item.status_dictText }}
                        </li>
                    </ul>
                </div>
                <div class="tbody" v-else>
                    <ul v-for="(item, i) in tableData" :key="i" @click="showEquipment(i, item)">
                        <li>{{ item.member }}</li>
                        <li>{{ item.type_dictText }}</li>
                        <li>{{ item.position }}</li>
                        <li>{{ item.aposition }}</li>
                        <li>{{ item.user }}</li>
                        <li>{{ item.reportingTime }}</li>
                        <li :class="item.status_dictText === '正常' ? 'normal' : 'abnormal'">
                            {{ item.status_dictText }}
                        </li>
                    </ul>
                </div>
            </table>
        </div>
        <!-- 楼层 -->
        <div class="floor">
            <h3>楼层</h3>
            <ul>
                <li
                    v-for="(item, index) in floorDate"
                    :key="index"
                    @click="show(index, item)"
                    :class="{ active: isactive == index }"
                >
                    <a>{{ item.floornum }}<span>F</span></a>
                </li>
            </ul>
        </div>
        <!-- 平面图 -->
        <div class="plan" v-if="isplan">
            <div class="plan-sidebar">
                <div class="plan-title">
                    <h3>二层平面图</h3>
                    <p>Two story fllor plan</p>
                </div>
                <div class="plan-content">
                    <ul>
                        <li v-for="(item, index) in area" :key="index">
                            <p>{{ item.text }}</p>
                            <span v-for="(i, index) in item.room" :key="index">{{ i.room1 }}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="plan-right">
                <a-dropdown :trigger="['contextmenu']">
                    <div class="plan-img">
                        <mini-map
                            ref="children"
                            @getEl="getEl"
                            @getEll="getEll"
                            @creatPopup="getPop"
                            @getIframe="isIframe"
                            @setIframe="setIframe"
                            @iframeSRC="iframeSRC"
                            @getMember="getMember"
                            :newFloor="newFloor"
                        ></mini-map>
                        <a class="close_btn" @click="close_lan"
                            ><font-awesome-icon class="icon-times" :icon="['fas', 'times']"
                        /></a>
                        <div class="plan-iframe" v-show="isIframe">
                            <iframe :src="iframeSrc"></iframe>
                            <a class="close_btn" @click="escQuit"
                                ><font-awesome-icon class="icon-times" :icon="['fas', 'times']"
                            /></a>
                        </div>
                    </div>
                    <a-menu slot="overlay" @click="addBtn">
                        <a-menu-item key="1">新增</a-menu-item>
                    </a-menu>
                </a-dropdown>
                <addassets
                    v-show="isBtnAdd"
                    :isadd="isBtnAdd"
                    @newisBtnAdd="newisBtnAdd"
                    @newData="getnewData"
                    :getTimer="timer"
                    :newFloor="newFloor"
                ></addassets>
                <div class="plan-text">
                    <div class="plan-text-left">
                        <h3>
                            建筑面积<span>1586.68m<sup>2</sup></span>
                        </h3>
                        <div class="plan-btn">
                            <ul>
                                <li v-for="(item, index) in planBtn" :key="index">
                                    <div @click="flyTo(index, item)">
                                        <a>{{ item.room }}室</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="plan-text-right">
                        <h3>
                            {{ planNumber }}室<span>{{ planAreage }}m<sup>2</sup></span>
                        </h3>
                        <div class="plan-room">
                            <img :src="planImg" draggable="false" />
                            <div><img src="@static/images/guide.png" draggable="false" /></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 弹出框 -->
            <div class="plan-popup" v-show="planClose">
                <div class="plan-popup-title">
                    <font-awesome-icon class="icon-tag icon" :icon="['fas', 'tag']" />
                    <h3>{{ newDeviceInfo.type_dictText }}</h3>
                    <i class="close" @click="closePlanPopup()">
                        <font-awesome-icon class="icon-times" :icon="['fas', 'times']"
                    /></i>
                </div>
                <div class="plan-popup-content">
                    <ul>
                        <li>
                            资产编号：
                            <input
                                type="text"
                                class="form-control"
                                autofocus
                                ref="userName"
                                v-model="newDeviceInfo.member"
                            />
                        </li>
                        <li>
                            资产类型：
                            <a-select v-model="newDeviceInfo.type_dictText" style="color: #fff">
                                <a-select-option value="电脑">电脑</a-select-option>
                                <a-select-option value="办公桌">办公桌</a-select-option>
                                <a-select-option value="档案柜">档案柜</a-select-option>
                                <a-select-option value="保险柜">保险柜</a-select-option>
                                <a-select-option value="椅子">椅子</a-select-option>
                            </a-select>
                        </li>
                        <li>
                            价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：
                            <input
                                type="text"
                                class="form-control"
                                autofocus
                                ref="userName"
                                v-model="newDeviceInfo.price"
                            />
                        </li>
                        <li>
                            状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：
                            <a-select
                                v-model="newDeviceInfo.status_dictText"
                                :style="{ color: newDeviceInfo.status_dictText === '正常' ? '#66c59d' : '#ec808d' }"
                                @change="selectChange"
                            >
                                <a-select-option value="正常">正常</a-select-option>
                                <a-select-option value="异常">异常</a-select-option>
                            </a-select>
                        </li>
                        <li>
                            品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;牌：
                            <input type="text" class="form-control" v-model="newDeviceInfo.brand" />
                        </li>
                        <li>
                            朝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向：
                            <a-select v-model="newDeviceInfo.direction" style="color: #fff">
                                <a-select-option value="东">东</a-select-option>
                                <a-select-option value="南">南</a-select-option>
                                <a-select-option value="西">西</a-select-option>
                                <a-select-option value="北">北</a-select-option>
                            </a-select>
                        </li>
                        <li>
                            管&nbsp;&nbsp;理&nbsp;&nbsp;人：
                            <input type="text" class="form-control" v-model="newDeviceInfo.admin" />
                        </li>
                        <li>
                            使&nbsp;&nbsp;用&nbsp;&nbsp;人：
                            <input type="text" class="form-control" v-model="newDeviceInfo.user" />
                        </li>
                        <li>
                            创建日期：
                            <a-date-picker
                                @change="onChange"
                                :allowClear="false"
                                suffix-icon="null"
                                v-model="newDeviceInfo.reportingTime"
                            />
                        </li>
                        <li>
                            购买日期：
                            <a-date-picker
                                @change="onChange"
                                :allowClear="false"
                                suffix-icon="null"
                                v-model="newDeviceInfo.purchaseTime"
                            />
                        </li>
                        <li>
                            型号规格：
                            <input type="text" class="form-control" v-model="newDeviceInfo.spec" />
                        </li>
                        <li>
                            资产位置：
                            <input type="text" class="form-control" v-model="newDeviceInfo.position" />
                        </li>
                        <li>
                            当前位置：
                            <input type="text" class="form-control" v-model="newDeviceInfo.aposition" />
                        </li>

                        <li>
                            备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：
                            <input type="text" class="form-control" v-model="newDeviceInfo.remarks" />
                        </li>
                    </ul>
                    <div class="plan-popup-btn">
                        <div @click="eqBaocun(newDeviceInfo)">
                            <a><font-awesome-icon class="icon" :icon="['fas', 'save']" />保存</a>
                        </div>
                        <div class="plan-remove">
                            <a-button type="dashed" @click="planRemove(newDeviceInfo.id)">
                                <font-awesome-icon class="icon" :icon="['fas', 'trash-alt']" />删除
                            </a-button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 弹出框1 -->
            <div class="plan-popup" v-show="planCloses">
                <div class="plan-popup-title">
                    <font-awesome-icon class="icon-tag icon" :icon="['fas', 'tag']" />
                    <h3>{{ newDeviceInfos.type_dictText }}</h3>
                    <i class="close" @click="closePlanPopup()">
                        <font-awesome-icon class="icon-times" :icon="['fas', 'times']"
                    /></i>
                </div>
                <div class="plan-popup-content">
                    <ul>
                        <li>
                            资产编号：
                            <input
                                type="text"
                                class="form-control"
                                autofocus
                                ref="userName"
                                v-model="newDeviceInfos.member"
                            />
                        </li>
                        <li>
                            资产类型：
                            <a-select v-model="newDeviceInfos.type_dictText" style="color: #fff">
                                <a-select-option value="电脑">电脑</a-select-option>
                                <a-select-option value="办公桌">办公桌</a-select-option>
                                <a-select-option value="档案柜">档案柜</a-select-option>
                                <a-select-option value="保险柜">保险柜</a-select-option>
                                <a-select-option value="椅子">椅子</a-select-option>
                            </a-select>
                        </li>
                        <li>
                            价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：
                            <input
                                type="text"
                                class="form-control"
                                autofocus
                                ref="userName"
                                v-model="newDeviceInfos.price"
                            />
                        </li>
                        <li>
                            状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：
                            <a-select
                                v-model="newDeviceInfos.status_dictText"
                                :style="{ color: newDeviceInfos.status_dictText === '正常' ? '#66c59d' : '#ec808d' }"
                                @change="selectChange"
                            >
                                <a-select-option value="正常">正常</a-select-option>
                                <a-select-option value="异常">异常</a-select-option>
                            </a-select>
                        </li>
                        <li>
                            品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;牌：
                            <input type="text" class="form-control" v-model="newDeviceInfos.brand" />
                        </li>
                        <li>
                            朝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向：
                            <a-select v-model="newDeviceInfos.direction" style="color: #fff">
                                <a-select-option value="东">东</a-select-option>
                                <a-select-option value="南">南</a-select-option>
                                <a-select-option value="西">西</a-select-option>
                                <a-select-option value="北">北</a-select-option>
                            </a-select>
                        </li>
                        <li>
                            管&nbsp;&nbsp;理&nbsp;&nbsp;人：
                            <input type="text" class="form-control" v-model="newDeviceInfos.admin" />
                        </li>
                        <li>
                            使&nbsp;&nbsp;用&nbsp;&nbsp;人：
                            <input type="text" class="form-control" v-model="newDeviceInfos.user" />
                        </li>
                        <li>
                            创建日期：
                            <a-date-picker
                                @change="onChange"
                                :allowClear="false"
                                suffix-icon="null"
                                v-model="newDeviceInfos.reportingTime"
                            />
                        </li>
                        <li>
                            购买日期：
                            <a-date-picker
                                @change="onChange"
                                :allowClear="false"
                                suffix-icon="null"
                                v-model="newDeviceInfos.purchaseTime"
                            />
                        </li>
                        <li>
                            型号规格：
                            <input type="text" class="form-control" v-model="newDeviceInfos.spec" />
                        </li>
                        <li>
                            资产位置：
                            <input type="text" class="form-control" v-model="newDeviceInfos.position" />
                        </li>
                        <li>
                            当前位置：
                            <input type="text" class="form-control" v-model="newDeviceInfos.aposition" />
                        </li>

                        <li>
                            备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：
                            <input type="text" class="form-control" v-model="newDeviceInfos.remarks" />
                        </li>
                    </ul>
                    <div class="plan-popup-btn">
                        <div @click="eqBaocun(newDeviceInfos)">
                            <a><font-awesome-icon class="icon" :icon="['fas', 'save']" />保存</a>
                        </div>
                        <div class="plan-remove">
                            <a-button type="dashed" @click="planRemoves(newDeviceInfos.id)">
                                <font-awesome-icon class="icon" :icon="['fas', 'trash-alt']" />删除
                            </a-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 平面图遮盖层 -->
        <div class="layer" v-show="isplan"></div>
        <!-- 柱形图 -->
        <div id="column" class="columnchart"></div>
    </div>
</template>

<script>
import { throttle } from '@/static/js/throttle' //节流搜索
import MiniMap from '@/components/school/LeftComponents/Ceshi' //平面图
import Addassets from '@/components/school/LeftComponents/AddAssets' //平面图
import bus from '@/static/js/eventBus'
export default {
    name: 'LeftAsset',
    components: {
        MiniMap,
        Addassets,
    },
    data() {
        return {
            getposition: [
                { x: 109.53163545978396, y: 18.30980351077379 },
                { x: 109.53160062380562, y: 18.30980731796042 },
                { x: 109.53152099754925, y: 18.30981070913461 },
                { x: 109.53145049034595, y: 18.309805296163958 },
                { x: 109.53141146341915, y: 18.30980798929525 },
                { x: 109.53137129577027, y: 18.309807805275312 },
                { x: 109.53123779995559, y: 18.309809439229355 },
                { x: 109.53123588116347, y: 18.310004668964638 },
                { x: 109.53123912689699, y: 18.310078643385452 },
                { x: 109.53124057720675, y: 18.31015926616253 },
                { x: 109.53131704841428, y: 18.310167163134437 },
                { x: 109.53137142860811, y: 18.310172963788872 },
                { x: 109.53140991472003, y: 18.31017117616169 },
                { x: 109.53146548054508, y: 18.31017293607765 },
                { x: 109.53154144507033, y: 18.31017383344779 },
                { x: 109.53167789498741, y: 18.310068707023035 },
            ],
            isBtnAdd: false,
            arr: [], //接收状态数据
            sum: '', //总数
            normal: 0, //正常数量
            abnormal: 0, //异常数量
            newnormal: '',
            newabnormal: '',
            iseqclose: false, //设备信息框
            isactive: -1, //楼层样式
            isplan: false, //显示平面图
            isTable: true, //隐藏资产表格
            sum_assets: 0, //资产总数
            normal_assets: 0, //正常资产
            abnormal_assets: 0, // 异常资产
            isAssetsSelectOne: false, //表格下拉菜单
            planClose: false, //平面图弹出框
            planCloses: false,
            selectText: '所有',
            newIndex: '',
            markerEl: '',
            markerEll: '',
            iframeSrc: '',
            isIframe: false,
            newFloor: '',
            newDate: '', //弹出框选择日期
            planBtn: [
                {
                    room: '202',
                    areage: 30.69,
                },
                {
                    room: '203',
                    areage: 29.57,
                },
                {
                    room: '204',
                    areage: 91.76,
                },
                {
                    room: '205',
                    areage: 29.85,
                },
                {
                    room: '206',
                    areage: 29.85,
                },
                {
                    room: '207',
                    areage: 30.69,
                },
                {
                    room: '208',
                    areage: 62.28,
                },
                {
                    room: '209',
                    areage: 62.28,
                },
                {
                    room: '210',
                    areage: 57.93,
                },
                {
                    room: '211',
                    areage: 45.48,
                },
                {
                    room: '212',
                    areage: 53.43,
                },
                {
                    room: '213',
                    areage: 29.85,
                },
                {
                    room: '214',
                    areage: 29.85,
                },
                {
                    room: '215',
                    areage: 60.6,
                },
                {
                    room: '216',
                    areage: 61.81,
                },
                {
                    room: '217',
                    areage: 203.37,
                },
            ],
            planImg: require('@/static/images/202.png'),
            planNumber: 202,
            planAreage: 30.69,
            // swiper滑动
            swiperOption: {
                pagination: '.swiper-pagination',
                paginationClickable: true,
            },
            // 下拉菜单数据
            options: [
                {
                    value: '所有',
                    label: '所有',
                },
                {
                    value: '一层',
                    label: '一层',
                    children: [
                        {
                            value: '所有',
                            label: '所有',
                        },
                    ],
                },
                {
                    value: '二层',
                    label: '二层',
                    children: [
                        {
                            value: '所有',
                            label: '所有',
                        },
                        {
                            value: '财务室',
                            label: '财务室',
                        },
                        {
                            value: '国资办公室',
                            label: '国资办公室',
                        },
                        {
                            value: '会议室',
                            label: '会议室',
                        },
                        {
                            value: '储物室',
                            label: '储物室',
                        },
                    ],
                },
                {
                    value: '三层',
                    label: '三层',
                    children: [
                        {
                            value: '所有',
                            label: '所有',
                        },
                    ],
                },
            ],
            //楼层信息
            floorDate: [
                {
                    id: 1,
                    floornum: 1,
                    floor: '一层',
                },
                {
                    id: 2,
                    floornum: 2,
                    floor: '二层',
                },
                {
                    id: 3,
                    floornum: 3,
                    floor: '三层',
                },
                {
                    id: 4,
                    floornum: 4,
                    floor: '四层',
                },
                {
                    id: 5,
                    floornum: 5,
                    floor: '五层',
                },
                {
                    id: 6,
                    floornum: 6,
                    floor: '六层',
                },
            ],
            //资产盘点
            sortData: [],
            //资产表格
            tableData: [],
            //搜索表格信息
            searchData: [],
            //设备信息
            deviceInfo: {},
            //平面图弹框
            newDeviceInfo: {},
            newDeviceInfos: {},
            // 表格标题
            theadth: [
                {
                    id: 1,
                    th: '资产编号',
                },
                {
                    id: 2,
                    th: '资产类型',
                },
                {
                    id: 3,
                    th: '资产位置',
                },
                {
                    id: 4,
                    th: '当前位置',
                },
                {
                    id: 5,
                    th: '使用人',
                },
                {
                    id: 6,
                    th: '创建时间',
                },
                {
                    id: 7,
                    th: '状态',
                },
            ],
            rdata: [], //数量
            ndata: [], //资产名
            //平面图数据
            area: [
                {
                    id: 1,
                    text: '储物间',
                    room: [{}],
                },
                {
                    id: 2,
                    text: '卫生间',
                    room: [{}],
                },
                {
                    id: 3,
                    text: '财务处',
                    room: [
                        {
                            room1: '202室',
                        },
                        {
                            room1: '203室',
                        },
                        {
                            room1: '204室',
                        },
                    ],
                },
                {
                    id: 4,
                    text: '后勤总支',
                    room: [
                        {
                            room1: '205室',
                        },
                    ],
                },
                {
                    id: 5,
                    text: '后勤服务中心办公室',
                    room: [
                        {
                            room1: '207室',
                        },
                        {
                            room1: '208室',
                        },
                        {
                            room1: '209室',
                        },
                    ],
                },
                {
                    id: 6,
                    text: '印刷中心',
                    room: [
                        {
                            room1: '210室',
                        },
                    ],
                },
                {
                    id: 7,
                    text: '会议室',
                    room: [
                        {
                            room1: '217室',
                        },
                        {
                            room1: '218室',
                        },
                    ],
                },
                {
                    id: 8,
                    text: '休息室',
                    room: [
                        {
                            room1: '216室',
                        },
                    ],
                },
                {
                    id: 9,
                    text: '国资处办公室',
                    room: [
                        {
                            room1: '213室',
                        },
                        {
                            room1: '214室',
                        },
                        {
                            room1: '215室',
                        },
                    ],
                },
                {
                    id: 10,
                    text: '指挥部办公室',
                    room: [
                        {
                            room1: '211室',
                        },
                        {
                            room1: '212室',
                        },
                    ],
                },
            ],
            //下拉菜单
            Select: [
                {
                    floorNum: '所有',
                },
                {
                    floorNum: '一层',
                },
                {
                    floorNum: '二层',
                },
                {
                    floorNum: '三层',
                },
                 {
                    floorNum: '四层',
                },
                 {
                    floorNum: '五层',
                },
                 {
                    floorNum: '六层',
                },
            ],
        }
    },
    computed: {
        // 分页器筛选
        pages() {
            const pages = []
            this.sortData.forEach((item, index) => {
                const page = Math.floor(index / 4)
                if (!pages[page]) {
                    pages[page] = []
                }
                pages[page].push(item)
            })
            // console.log(pages)
            return pages
        },
    },
    methods: {
        getMember(member) {
            this.planCloses = true
            // console.log(member)
            this.axios
                .get('/assets/findAll', {
                    params: {
                        floor: this.newFloor,
                        member: member,
                    },
                })
                .then((res) => {
                    // console.log(res.result.records[0])
                    // res.result.forEach
                    this.newDeviceInfos = {
                        admin: res.result.records[0].admin, //管理人
                        aposition: res.result.records[0].aposition,
                        brand: res.result.records[0].brand, //品牌
                        floor: res.result.records[0].floor,
                        id: res.result.records[0].id,
                        member: res.result.records[0].member, //资产编号
                        position: res.result.records[0].position, //资产位置
                        price: res.result.records[0].price, //价格
                        purchaseTime: res.result.records[0].purchaseTime, //购买时间
                        remarks: res.result.records[0].remarks, //备注
                        reportingTime: res.result.records[0].reportingTime, //上报时间
                        spec: res.result.records[0].spec, //型号规格
                        status: res.result.records[0].status, //状态
                        status_dictText: res.result.records[0].status_dictText, //状态
                        type: res.result.records[0].type,
                        type_dictText: res.result.records[0].type_dictText, //资产类型
                        user: res.result.records[0].user, //使用人
                        x: res.result.records[0].x,
                        y: res.result.records[0].y,
                        direction: res.result.records[0].direction,
                    }
                })
        },
        //平面图弹框
        getPop(i) {
            // console.log(i)
            this.planClose = true
            this.axios
                .get('/assets/queryById', {
                    params: {
                        id: i,
                    },
                })
                .then((res) => {
                    // console.log(res.result.records)
                    res.result.records.forEach((item) => {
                        this.newDeviceInfo = {
                            admin: item.admin, //管理人
                            aposition: item.aposition,
                            brand: item.brand, //品牌
                            floor: item.floor,
                            id: item.id,
                            member: item.member, //资产编号
                            position: item.position, //资产位置
                            price: item.price, //价格
                            purchaseTime: item.purchaseTime, //购买时间
                            remarks: item.remarks, //备注
                            reportingTime: item.reportingTime, //上报时间
                            spec: item.spec, //型号规格
                            status: item.status, //状态
                            status_dictText: item.status_dictText, //状态
                            type: item.type,
                            type_dictText: item.type_dictText, //资产类型
                            user: item.user, //使用人
                            x: item.x,
                            y: item.y,
                            direction: item.direction,
                        }
                    })
                })
        },
        //信息显示
        getInfo() {
            this.axios.get('/assets/findAll').then(({ result }) => {
                var all = result.records
                // console.log(result.records)
                for (let i = 0; i < all.length; i++) {
                    this.tableData.push({
                        id: all[i].id, //id
                        spec: all[i].spec, //型号规格
                        member: all[i].member, //资产编号
                        user: all[i].user, //使用人
                        type_dictText: all[i].type_dictText, //资产类型
                        position: all[i].position, //资产位置
                        aposition: all[i].aposition, //当前位置
                        purchaseTime: all[i].purchaseTime, //购买时间
                        reportingTime: all[i].reportingTime, //上报时间
                        status_dictText: all[i].status_dictText, //状态
                        price: all[i].price, //价格
                        brand: all[i].brand, //品牌
                        remarks: all[i].remarks, //备注
                        admin: all[i].admin, //管理人
                        direction: all[i].direction,
                        floor: all[i].floor, //楼层
                        x: all[i].x,
                        y: all[i].y,
                    })
                }
                // console.log(this.tableData)
            })
        },
        //修改状态数量
        setAssetsNumber(arr) {
            this.arr.forEach((item) => {
                if (item.status == '1') {
                    this.normal = item.count
                } else {
                    this.abnormal = item.count
                }
                this.PieChart(this.normal, this.abnormal)
            })
            // console.log(2)
        },
        // 获取状态数量
        getAssetsNumber() {
            this.axios.get('/assets/staAssetsCount').then((result) => {
                var newall = result.result
                for (let i = 0; i < newall.length; i++) {
                    this.arr.push({
                        count: newall[i].count,
                        status: newall[i].status,
                    })
                }
                this.setAssetsNumber(this.arr)
            })
        },
        //刷新页面数据
        timer() {
            return setTimeout(() => {
                this.getSum()
            }, 1000)
        },
        //资产总数
        async getSum() {
            const res = await this.axios.get('/assets/staCount')
            this.sum = res.result
            await this.axios.get('/assets/staAssetsCount').then((res) => {
                res.result.forEach((item) => {
                    if (item.status == '1') {
                        this.newnormal = item.count
                    } else {
                        this.newabnormal = item.count
                    }
                })
            })
        },
        //资产分类
        getClassify() {
            this.axios.get('/assets/staTypeAndCount').then((data) => {
                // console.log(data)
                data.result.forEach((item, index) => {
                    this.rdata.push(item.count)
                    this.ndata.push(item.typeStr)
                    var newIndex = index + 1
                    var newIcon = require('@/static/images/' + item.typeStr + '.png')
                    this.sortData.push({
                        count: item.count,
                        typeStr: item.typeStr,
                        imgbg: 'img-bg' + newIndex,
                        icon: newIcon,
                    })
                })
                this.ColumnChart()
            })
        },
        //饼图
        PieChart(count1, count2) {
            let myChart = this.$echarts.init(document.getElementById('chart'))
            var option = {
                tooltip: {
                    show: false,
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)',
                },
                legend: {
                    orient: 'horizontal',
                    x: 'center',
                    bottom: 0,
                    itemWidth: 12,
                    itemHeight: 12,
                    // align: 'right',
                    icon: 'roundRect',
                    // right: 'center',
                    // bottom: 0,
                    align: 'left',
                    itemGap: 75, // 设置间距
                    data: ['正常资产', '异常资产'],
                    textStyle: {
                        color: 'white',
                        fontSize: '12',
                    },
                },
                color: ['rgb(95,122,190)', '#7ffafd'],
                series: [
                    {
                        name: '资产',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '50%'],
                        data: [
                            { value: count1, name: '正常资产' },
                            { value: count2, name: '异常资产' },
                        ],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, //隐藏标示文字
                                    fontSize: 16,
                                    color: '#fff',
                                    formatter: '{b}  {c}',
                                    // formatter: '{d}%',
                                    // position: 'inside',
                                },
                                labelLine: {
                                    show: true, //隐藏标示线
                                    length: 10,
                                    length2: 15,
                                    lineStyle: {
                                        color: 'rgba(255, 255, 255, 1)',
                                    },
                                },
                            },
                        },
                    },
                    {
                        name: '外边框',
                        type: 'pie',
                        hoverAnimation: false,
                        radius: ['57%', '57%'], //边框大小
                        center: ['50%', '50%'], //边框位置
                        data: [
                            {
                                value: 0,
                                itemStyle: {
                                    normal: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowOffsetY: 0,
                                        shadowColor: 'rgba(0,0,0,0.7)',
                                        borderWidth: 6, //设置边框粗细
                                        borderColor: 'rgba(95,122,190, 0.7)', //边框颜色
                                    },
                                },
                            },
                        ],
                        z: -2,
                        label: {
                            show: false, //隐藏标示文字
                        },
                        labelLine: {
                            show: false, //隐藏标示线
                        },
                    },
                ],
            }
            myChart.setOption(option)
            window.addEventListener('resize', function () {
                myChart.resize()
            })
        },
        //柱形图
        ColumnChart() {
            // 封装分割数组
            function arrayChunk(array, size) {
                let data = []
                for (let i = 0; i < array.length; i += size) {
                    data.push(array.slice(i, i + size))
                }
                return data
            }
            //分页数字
            const Pages = []
            var options = []
            var xAxisArr = arrayChunk(this.ndata, 4)
            var seriesArr = arrayChunk(this.rdata, 4)
            for (var j = 0; j < xAxisArr.length; j++) {
                Pages.push(j + 1)
            }
            for (let index = 0; index < Pages.length; index++) {
                let newxAxis = {}
                let series = {}
                newxAxis.data = xAxisArr[index]
                series.data = seriesArr[index]
                options.push({
                    xAxis: newxAxis,
                    series: series,
                })
            }
            // 基于准备好的dom，初始化echarts实例
            let column = this.$echarts.init(document.getElementById('column'))
            // 绘制图表
            column.setOption({
                baseOption: {
                    timeline: {
                        //loop: false,
                        axisType: 'category',
                        show: true,
                        autoPlay: false,
                        playInterval: 1000,
                        data: Pages,
                        symbolSize: 8,
                        x: 'center',
                        bottom: '0',
                        width: '5%',
                        //隐藏文字
                        label: {
                            show: false,
                        },
                        //隐藏提示
                        tooltip: {
                            show: false,
                        },
                        //隐藏线
                        lineStyle: {
                            show: false,
                        },
                        //隐藏按钮
                        controlStyle: {
                            show: false,
                        },
                        //设置圆点
                        itemStyle: {
                            normal: {
                                opacity: 0.2,
                            },
                            emphasis: {
                                color: '#ccc',
                            },
                        },
                        //选中项样式
                        checkpointStyle: {
                            color: '#ccc',
                            borderWidth: 0,
                            symbolSize: 8,
                        },
                    },
                    tooltip: { trigger: 'item' },
                    legend: {
                        show: false,
                    },
                    grid: {
                        containLabel: true,
                        left: 13,
                    },
                    xAxis: [
                        {
                            nameLocation: 'end',
                            nameTextStyle: {
                                //---坐标轴名称样式
                                fontSize: 7,
                                color: '#fff',
                                padding: [5, 0, 0, -5], //---坐标轴名称相对位置
                            },
                            type: 'category',
                            axisLabel: {
                                color: '#fff',
                                margin: 10,
                                fontSize: 12,
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: 'rgba(255,255,255,0.7)',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                        },
                    ],
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            color: '#fff',
                            fontSize: 12,
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                //设置刻度线粗度(粗的宽度)
                                width: 1,
                                color: 'rgba(255,255,255,0.2)',
                                type: 'dashed',
                            },
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(255,255,255,0.7)',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                    series: [
                        {
                            type: 'bar',
                            label: {
                                show: true,
                                position: 'top',
                                color: '#ffffff',
                                fontSize: 12,
                                align: 'center',
                            },
                            itemStyle: {
                                normal: {
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: '#80FFFF', // 0% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: '#68519F', // 100% 处的颜色
                                            },
                                        ],
                                    },
                                },
                            },
                            barWidth: 25,
                        },
                    ],
                    tooltip: {},
                },
                options: options,
            })
            window.addEventListener('resize', function () {
                column.resize()
            })
        },
        // 关闭设备信息
        eqclose() {
            this.iseqclose = false
        },
        // 点击显示平面图
        show(index, item) {
            this.newFloor = item.floor
            // console.log(this.newFloor)
            this.isactive = index
            this.isplan = true
            this.isTable = false
        },
        //关闭平面图
        close_lan() {
            this.isplan = false
            this.isactive = -1
            this.isTable = true
            this.planClose = false
            this.planCloses = false
            this.isBtnAdd = false
        },
        //关闭平面图弹框
        closePlanPopup() {
            this.planClose = false
            this.planCloses = false
        },
        //搜索下拉框切换
        searchChange(e) {},
        //显示设备信息
        showEquipment(i, item) {
            // console.log(item)
            this.newIndex = i
            this.iseqclose = true
            this.deviceInfo = {
                admin: item.admin, //管理人
                aposition: item.aposition, //当前位置
                brand: item.brand,
                id: item.id,
                member: item.member, //资产编号
                position: item.position, //资产位置
                price: item.price, //价格
                purchaseTime: item.purchaseTime, //购买时间
                remarks: item.remarks,
                reportingTime: item.reportingTime, //上报时间
                spec: item.spec,
                status_dictText: item.status_dictText, //状态
                type_dictText: item.type_dictText, //资产类型
                user: item.user, //使用人
                floor: item.floor, //楼层
                direction: item.direction,
                x: item.x,
                y: item.y,
            }
            // console.log(this.deviceInfo)
        },
        //设备信息日期选择
        onChange(date, dateString) {
            // console.log(dateString)
            this.newDate = dateString
        },
        //设备信息状态切换
        selectChange() {},
        //搜索功能
        searchAction: throttle(function (e) {
            // console.log(111)
            this.iseqclose = false //关闭设备信息
            const inputValue = e.target.value
            let aMember = ''
            // let aFloor = ''
            let aType = ''
            this.tableData.filter((item) => {
                if (item.member == inputValue) {
                    aMember = inputValue
                    // } else if (item.floor == inputValue) {
                    //     aFloor = inputValue
                } else if (item.type_dictText == inputValue) {
                    aType = inputValue
                }
            })
            // console.log(this.selectText)
            this.axios
                .get('/assets/findAll', {
                    params: {
                        aMember: aMember,
                        aFloor: this.selectText,
                        aType: aType,
                    },
                })
                .then((data) => {
                    // console.log(data.result.records)
                    this.searchData = data.result.records
                })
        }, 1000),
        //表格下拉菜单
        assetsSelectChage() {
            this.isAssetsSelectOne = !this.isAssetsSelectOne
        },
        //下拉菜单
        onCascader(value, selectedOptions) {
            var newValue
            value.forEach((item, index) => {
                if (index == 0) {
                    newValue = item
                }
            })
            this.axios
                .get('/assets/staAssetsCount', {
                    params: {
                        floor: newValue,
                    },
                })
                .then((data) => {
                    var newarr = data.result
                    newarr.forEach((list) => {
                        if (list.status == '1') {
                            this.normal = list.count
                        } else {
                            this.abnormal = list.count
                        }
                        this.PieChart(this.normal, this.abnormal)
                    })
                })
            this.axios
                .get('/assets/staTypeAndCount', {
                    params: {
                        floor: newValue,
                    },
                })
                .then((res) => {
                    this.sortData = []
                    this.rdata = []
                    this.ndata = []
                    res.result.forEach((item, index) => {
                        this.rdata.push(item.count)
                        this.ndata.push(item.typeStr)
                        var newIndex = index + 1
                        var newIcon = require('@/static/images/' + item.typeStr + '.png')
                        this.sortData.push({
                            count: item.count,
                            typeStr: item.typeStr,
                            imgbg: 'img-bg' + newIndex,
                            icon: newIcon,
                        })
                    })
                    this.ColumnChart()
                })
        },
        //表格下拉菜单
        showFoolrInfo(i) {
            this.isAssetsSelectOne = false
            this.selectText = i.target.innerText //改变点击下拉标题改变
            this.searchData = []
            this.axios
                .get('/assets/findAll', {
                    params: {
                        aFloor: this.selectText, //楼层
                    },
                })
                .then((res) => {
                    console.log(res)
                    this.tableData = res.result.records
                })
        },
        //平面设备元素
        getEl(e) {
            // console.log(e)
            this.markerEl = e
        },
        getEll(e) {
            this.markerEll = e
        },
        //平面图删除功能
        planRemove(member) {
            let _this = this
            _this.$confirm({
                title: '确定删除?',
                okText: '确定',
                okType: 'danger',
                cancelText: '取消',
                onOk() {
                    _this.planClose = false
                    // var newarr1 = _this.tableData.filter((value, i) => value.id != member)
                    // _this.tableData = newarr1
                    _this.timer()
                    _this.markerEl.style.display = 'none'
                    // _this.markerEll.style.display = 'none'
                    _this.axios
                        .delete('/assets/delete', {
                            params: {
                                id: member,
                            },
                        })
                        .then((res) => {
                            _this.tableData = []
                            setTimeout(() => {
                                _this.getInfo()
                            }, 500)
                            console.log(1)
                            console.log(res)
                        })
                },
                onCancel() {
                    console.log('Cancel')
                },
            })
        },
        planRemoves(member) {
            let _that = this
            _that.$confirm({
                title: '确定删除?',
                okText: '确定',
                okType: 'danger',
                cancelText: '取消',
                onOk() {
                    _that.planCloses = false
                    // let newarr = _that.tableData.filter((value, i) => value.id != member)
                    // _that.tableData = newarr
                    _that.timer()
                    _that.markerEll.style.display = 'none'
                    _that.axios
                        .delete('/assets/delete', {
                            params: {
                                id: member,
                            },
                        })
                        .then((res) => {
                            _that.tableData = []
                            setTimeout(() => {
                                _that.getInfo()
                            }, 500)
                            console.log(2)
                            console.log(res)
                        })
                },
                onCancel() {
                    console.log('Cancel')
                },
            })
        },
        //设备信息删除功能
        eqRemove(index) {
            console.log(index)
            let _this = this
            _this.$confirm({
                title: '确定删除?',
                okText: '确定',
                okType: 'danger',
                cancelText: '取消',
                onOk() {
                    _this.iseqclose = false
                    // _this.tableData.splice(_this.newIndex, 1)
                    _this.searchData.splice(_this.newIndex, 1)
                    let newarr = _this.tableData.filter((value, i) => value.id != index)
                    _this.tableData = newarr
                    _this.timer()
                    _this.axios
                        .delete('/assets/delete', {
                            params: {
                                id: index,
                            },
                        })
                        .then((res) => {
                            console.log(res)
                        })
                },
                onCancel() {
                    console.log('Cancel')
                },
            })
        },
        //设备信息保存功能
        eqBaocun(i) {
            // console.log(i)
            this.iseqclose = false
            this.planClose = false
            this.planCloses = false
            this.tableData = []
            this.searchData = []
            this.timer()
            setTimeout(() => {
                this.getInfo()
            }, 300)
            // console.log(i.purchaseTime)
            var newStatus_dictText = Number
            if (i.status_dictText == '正常') {
                newStatus_dictText = 1
            } else {
                newStatus_dictText = 2
            }

            var newtype //类型转换数字
            if (i.type_dictText == '电脑') {
                newtype = 1
            } else if (i.type_dictText == '办公桌') {
                newtype = 2
            } else if (i.type_dictText == '档案柜') {
                newtype = 3
            } else if (i.type_dictText == '保险柜') {
                newtype = 4
            } else if (i.type_dictText == '椅子') {
                newtype = 5
            }
            // console.log(newtype)
            this.axios
                .put('/assets/edit', {
                    admin: i.admin, //管理人
                    aposition: i.aposition, //当前位置
                    brand: i.brand, //品牌
                    id: i.id, //id
                    member: i.member, //资产编号
                    position: i.position, //资产位置
                    price: i.price, //价格
                    purchaseTime: this.newDate, //购买时间
                    remarks: i.remarks, //备注
                    reportingTime: i.reportingTime, //上报时间
                    spec: i.spec, //规格型号
                    status: newStatus_dictText, //状态
                    // type_dictText: newtype, //资产类型
                    user: i.user, //使用人
                    type: newtype, //资产类型
                    floor: i.floor, //楼层
                    direction: i.direction, //资产方向
                    x: i.x,
                    y: i.y,
                })
                .then((res) => {
                    console.log(res)
                })
        },
        //平面图飞行按钮
        flyTo(i, item) {
            this.$refs.children.fly(this.getposition[i].x, this.getposition[i].y)
            if (item.room) {
                this.planNumber = item.room //切换房间号
                this.planImg = require('@/static/images/' + this.planNumber + '.png') //切换图片
                this.planAreage = item.areage //切换面积
            }
        },
        //平面图右键
        addBtn() {
            this.isBtnAdd = true
        },
        //关闭平面图新增弹框
        newisBtnAdd(e) {
            this.isBtnAdd = e
        },
        // 表格删除取消
        cancel() {
            console.log('取消删除')
        },
        //新增更新表格
        getnewData(data) {
            console.log(data);
            this.timer()
            this.tableData.push({
                spec: data.spec, //型号规格
                member: data.member, //资产编号
                user: data.user, //使用人
                type_dictText: data.type, //资产类型
                position: data.position, //资产位置
                aposition: data.aposition, //当前位置
                purchaseTime: data.purchaseTime, //购买时间
                reportingTime: data.reportingTime, //上报时间
                status_dictText: data.status, //状态
                price: data.price, //价格
                brand: data.brand, //品牌
                remarks: data.remarks, //备注
                admin: data.admin, //管理人
                id: data.id,
                floor: data.floor, //楼层,例如：一层，二层，三层
                direction: data.direction, //资产方向
                y: data.newlongitude, //经度
                x: data.newlatitude, //纬度
            })
            // this.tableData = []
            // setTimeout(this.getInfo(), 500)
            // console.log('ok')
        },
        //显示全景
        setIframe() {
            this.isIframe = true
        },
        //退出全景
        escQuit() {
            this.isIframe = false
        },
        //全景地址
        iframeSRC(data) {
            this.iframeSrc = data
        },
    },
    created() {
        this.getInfo()
        this.getAssetsNumber()
        this.getSum()
        this.getClassify()
    },
    mounted() {
        //饼图
        this.PieChart()
        //柱形图
        // this.ColumnChart()
        // 禁止图片拖动打开新页面
        document.ondragstart = function () {
            return false
        }
    },
}
</script>

<style lang="less" scoped>
@import '../../../assets/less/school.less';
.asset-content {
    width: 350px;
    padding-left: 15px;
    //下拉框
    .cascader {
        .ant-cascader-picker {
            width: 100%;
            // color: #ccc;
        }
    }
    //图表
    .chart {
        width: 100%;
        height: 200px;
        // border: 1px solid red;
    }
    //柱形图
    .columnchart {
        width: 100%;
        height: 300px;
        margin-top: 20px;
    }
    //资产分类分页
    .goods-content {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 30px;
        .goods-item {
            width: 50%;
            display: flex;
            align-items: center;
            margin: 15px 0;
            justify-content: center;
            .goods-img {
                width: 60px;
                height: 60px;
                text-align: center;
                border-radius: 6px;
                margin-right: 10px;
                margin-left: 25px;
                color: #fff;
                img {
                    // width: 100%;
                    height: 100%;
                    padding: 15px;
                }
            }
            .img-bg1 {
                background: #c280ff;
                // background-image: url('@static/images/safe.png');
            }
            .img-bg2 {
                background: #81d3f8;
            }
            .img-bg3 {
                background: #facd91;
            }
            .img-bg4 {
                background: #66c59d;
            }
            .img-bg5 {
                background: #fca67e;
            }
            .goods-text {
                width: 50px;
                color: #fff;
                display: flex;
                flex-direction: column;
                p {
                    font-size: 16px;
                    margin-bottom: 5px;
                }
                span {
                    font-size: 12px;
                }
            }
        }
    }
    // 分页容器
    .goods-pagination {
        width: 335px;
        text-align: center;
        padding-left: 5px;
    }
    // 分页点点
    /deep/.swiper-pagination-bullet {
        font-size: 14px;
        background: #ccc;
        margin: 0 5px;
    }
    //设备信息
    .equipment {
        width: 350px;
        // height: 220px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 3px;
        // border: 1px solid red;
        .eq-title {
            width: 100%;
            height: 44px;
            display: flex;
            align-items: center;
            position: relative;
            background: rgba(242, 242, 242, 0.9);
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            .icon {
                font-size: 24px;
                margin-left: 20px;
                color: #999;
                // transform: rotate(135deg);
            }
            h3 {
                font-size: 16px;
                margin-left: 20px;
            }
            .close {
                position: absolute;
                top: 5px;
                right: 5px;
                width: 30px;
                height: 30px;
                line-height: 30px;
                border-radius: 50%;
                font-size: 16px;
                color: #f1f1f1;
                text-align: center;
                cursor: pointer;
                background-image: linear-gradient(to bottom, rgb(146, 178, 202), rgb(151, 150, 182));
            }
        }
        .eq-content {
            width: 100%;
            // height: 200px;
            display: flex;
            flex-direction: column;
            // align-items: center;
            // justify-content: center;
            background: rgba(82, 102, 144, 0.8);
            border-bottom-left-radius: 3px;
            border-bottom-right-radius: 3px;
            ul {
                display: flex;
                flex-wrap: wrap;
                padding: 0 30px;
                margin: 10px 0;
                li {
                    width: 50%;
                    height: 20px;
                    font-size: 12px;
                    line-height: 20px;
                    color: #fff;
                    display: flex;
                    // justify-content: center;
                    align-items: center;
                    margin: 3px 0;
                    // border: 1px solid red;
                    .form-control {
                        width: 55%;
                        height: 20px;
                        background: transparent;
                        font-size: 12px;
                        border: none;
                        &:focus {
                            outline: none;
                        }
                    }
                    /deep/ .ant-calendar-picker {
                        position: relative;
                        width: 55%;
                        background: transparent;
                        border: none;
                        height: 20px;
                        padding: 0;
                        margin: 0;
                        // background: #ccc;
                        // border: 1px solid red;
                        div {
                            padding: 0;
                            margin: 0;
                            height: 100%;
                            line-height: 0;
                            // line-height: 10px;
                            input {
                                height: 20px;
                                padding: 0;
                                margin: 0;
                                color: #fff;
                                background: transparent;
                                border: none;
                                line-height: 0;
                                font-size: 12px;
                                border: none;
                            }
                            .ant-calendar-picker-icon {
                                display: none;
                                border: 1px solid red;
                            }
                        }
                    }
                    /deep/ .ant-select {
                        width: 50%;
                        height: 20px;
                        .ant-select-selection {
                            width: 100%;
                            height: 100%;
                            background: transparent;
                            border: none;
                            outline: none;
                            border-radius: 0;
                        }
                        .ant-select-selection__rendered {
                            padding: 0;
                            // margin: 0;
                            margin-left: 3px;
                            line-height: 0;
                            width: 100%;
                            height: 100%;
                            // border: 1px solid blue;
                            .ant-select-selection-selected-value {
                                padding: 9px 0 0 0;
                                margin: 0;
                                width: 100%;
                                height: 100%;
                                // line-height: 0;
                                font-size: 12px;
                                // border: 1px solid blue;
                            }
                        }
                        .ant-select-arrow {
                            color: #fff;
                        }
                    }
                }
            }
            .eq-btn {
                width: 100%;
                // padding: 10px 0;
                margin-bottom: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
                div {
                    width: 58px;
                    height: 25px;
                    margin: 0 20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 6px;
                    background: rgba(95, 122, 190, 0.6);
                    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);

                    a {
                        display: block;
                        width: 53px;
                        height: 18px;
                        line-height: 18px;
                        color: #fff;
                        text-align: center;
                        border-radius: 6px;
                        font-size: 12px;
                        background: rgba(95, 122, 190, 1);
                        box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1);
                        .icon {
                            margin-right: 5px;
                            font-size: 12px;
                        }
                        &:hover {
                            background: rgba(134, 160, 226, 0.5);
                        }
                    }
                }
                .eq-remove {
                    width: 58px;
                    height: 25px;
                    margin: 0 20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 6px;
                    background: rgba(236, 128, 141, 0.6);
                    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
                    /deep/.ant-btn-dashed {
                        display: block;
                        width: 53px;
                        height: 18px;
                        // line-height: 1px;
                        color: #fff;
                        text-align: center;
                        border-radius: 6px;
                        font-size: 12px;
                        background: rgba(236, 128, 141, 1);
                        box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1);
                        padding: 0;
                        margin: 0;
                        border: none;
                        .icon {
                            margin-right: 5px;
                            font-size: 12px;
                        }
                        &:hover {
                            background: rgb(238, 143, 154, 0.5);
                        }
                    }
                }
            }
        }
    }
    //设备表格
    .assets {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        width: 50%;
        display: flex;
        background: rgba(55, 79, 126, 0.8);
        .assets-content {
            flex: 6;
            padding: 0 10px;
            background: rgba(55, 79, 126, 0.5);
            display: flex;
            flex-direction: column;
            h3 {
                font-size: 18px;
                color: #fff;
                margin: 10px 0;
            }
            .search {
                width: 100%;
                height: 35px;
                display: flex;
                align-items: center;
                position: relative;
                margin-bottom: 50px;

                input {
                    width: 100%;
                    height: 35px;
                    padding: 5px 0;
                    padding-left: 70px;
                    font-size: 14px;
                    border-radius: 6px;
                    border: none;
                    outline: none;
                }
                .assets-select {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 60px;
                    height: 35px;
                    padding: 6px 0;
                    border-radius: 6px;
                    font-size: 14px;
                    background: #fff;
                    .select-box {
                        .select-title {
                            div {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                cursor: pointer;
                                p {
                                    font-size: 14px;
                                    padding-left: 10px;
                                    color: #ccc;
                                }
                                .nav-icon {
                                    font-size: 14px;
                                }
                            }
                            .select-one {
                                height: 135px;
                                overflow-y: auto;
                                position: relative;
                                top: 12px;
                                // overflow: hidden;
                                left: 0;
                                background: #fff;
                                z-index: 2;
                                border-radius: 3px;
                                // border-bottom-left-radius: 3px;
                                // border-bottom-right-radius: 3px;
                                cursor: pointer;
                                .select-list {
                                    width: 100%;
                                    padding: 5px 10px;
                                    // position: relative;
                                    &:hover {
                                        background: rgba(230, 247, 255, 1);
                                        border-radius: 3px;
                                    }
                                    .select-two {
                                        width: 120px;
                                        background: #fff;
                                        border-radius: 3px;
                                        overflow: hidden;
                                        position: absolute;
                                        top: 0;
                                        left: 60px;
                                        li {
                                            padding: 5px 10px;
                                            font-size: 14px;
                                            &:hover {
                                                background: #ccc;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .statistics {
                display: flex;
                justify-content: space-between;
                align-items: center;
                div {
                    text-align: center;
                    p {
                        padding: 5px;
                        margin-bottom: 10px;
                        border-radius: 3px;
                        font-size: 14px;
                        color: #fff;
                        background: #5d7bc8;
                    }
                    .normal-assets {
                        background: #66c59d;
                    }
                    .abnormal-assets {
                        background: #ec808d;
                    }
                    span {
                        color: #fff;
                        font-size: 16px;
                        font-weight: 600;
                    }
                }
            }
        }
        table {
            width: 100%;
            // height: 100%;
            // border: 1px solid red;
            display: block;
            flex: 18;
            thead {
                display: block;
                width: 100%;
                tr {
                    width: 100%;
                    display: flex;
                    justify-content: inherit;
                    align-items: center;
                    color: #fff;
                    background: rgba(55, 79, 126, 0.5);
                    padding-left: 20px;
                    th {
                        width: 10%;
                        text-align: left;
                        font-size: 16px;
                        padding: 10px 0;
                        &:nth-child(1) {
                            width: 12%;
                        }
                        &:nth-child(2) {
                            width: 12%;
                        }
                        &:nth-child(3) {
                            width: 20%;
                        }
                        &:nth-child(4) {
                            width: 20%;
                        }
                        &:nth-child(5) {
                            width: 12%;
                        }
                        &:nth-child(6) {
                            width: 16%;
                        }
                        &:nth-child(7) {
                            width: 8%;
                        }
                    }
                }
            }
            .tbody {
                display: block;
                width: 100%;
                height: 190px;
                overflow-y: scroll;
                scrollbar-width: none;
                ul {
                    width: 100%;
                    display: flex;
                    justify-content: inherit;
                    align-items: center;
                    color: #fff;
                    padding-left: 20px;
                    &:hover {
                        background: rgba(55, 79, 126, 0.5);
                    }
                    li {
                        width: 10%;
                        text-align: left;
                        padding: 5px 0;
                        font-size: 14px;
                        cursor: pointer;
                        &:nth-child(1) {
                            width: 12%;
                        }
                        &:nth-child(2) {
                            width: 12%;
                        }
                        &:nth-child(3) {
                            width: 20%;
                        }
                        &:nth-child(4) {
                            width: 20%;
                        }
                        &:nth-child(5) {
                            width: 12%;
                        }
                        &:nth-child(6) {
                            width: 16%;
                        }
                        &:nth-child(7) {
                            width: 8%;
                        }
                    }
                    .normal {
                        color: #66c59d;
                    }
                    .abnormal {
                        color: #ec808d;
                    }
                }
            }
            .tbody::-webkit-scrollbar {
                display: none;
            }
        }
    }
    //楼层
    .floor {
        width: 65px;
        position: fixed;
        top: 50%;
        left: 400px;
        transform: translateY(-50%);
        padding: 10px 10px 5px;
        border-radius: 6px;
        background: rgba(55, 79, 126, 0.8);
        display: flex;
        flex-direction: column;
        align-items: center;
        h3 {
            text-align: center;
            font-size: 18px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.8);
        }
        ul {
            li {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin: 15px 0;
                text-align: center;
                border-radius: 3px;
                transition: all 0.3s;
                &:hover {
                    background: rgb(192, 172, 190);
                }
                a {
                    padding: 0px 15px;
                    color: #fff;
                    font-size: 20px;
                    font-weight: 600;
                    span {
                        font-size: 14px;
                    }
                }
            }
            .active {
                background: rgb(192, 172, 190);
            }
        }
    }
    //平面图
    .plan {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -46%);
        width: 1217px;
        height: 865px;
        display: flex;
        background: #fafafa;
        border-radius: 3px;
        z-index: 3;
        .plan-sidebar {
            width: 240px;
            height: 100%;
            background: rgb(80, 101, 140);
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
            .plan-title {
                width: 100%;
                padding: 20px 40px;
                // cursor: pointer;
                h3 {
                    font-size: 20px;
                    font-weight: 600;
                    color: #7ffafd;
                }
                p {
                    color: #fff;
                    font-size: 16px;
                }
            }
            .plan-content {
                width: 100%;
                padding: 0 40px;
                ul {
                    li {
                        margin-bottom: 20px;
                        p {
                            font-size: 16px;
                            color: #7ffafd;
                        }
                        span {
                            font-size: 14px;
                            color: #fff;
                            margin-right: 10px;
                        }
                    }
                }
            }
        }
        .plan-right {
            width: 990px;
            height: 100%;
            .plan-img {
                position: relative;
                overflow: hidden;
                width: 100%;
                height: 610px;

                .img {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    .hotspot {
                        display: block;
                        width: 35px;
                        height: 35px;
                        border-radius: 50%;
                        position: absolute;
                        transform: translate(-50%, -50%);
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        z-index: 1;
                        border-radius: 50%;
                        // background: radial-gradient(transparent, rgba(21, 96, 245, 1));
                        // animation: scaleout 1s infinite linear;
                        span {
                            display: block;
                            width: 8px;
                            height: 8px;
                            border-top-left-radius: 20px;
                            border-top-right-radius: 22px;
                            border-bottom-left-radius: 22px;
                            transform: rotate(45deg);
                            background: linear-gradient(to right, rgb(204, 220, 77), rgb(243, 243, 242));
                            margin-bottom: 5px;
                            // box-shadow: -2px 1px 0px 1px rgb(164, 167, 171);
                        }
                    }
                    .hotspot::before {
                        content: '';
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        width: 0;
                        height: 0;
                        border-radius: 50%;
                        background: radial-gradient(rgba(21, 96, 245, 1), transparent);
                        animation: scaleout 1s infinite linear;
                    }
                    .desk {
                        width: 20px;
                        height: 10px;
                        display: block;
                        position: absolute;
                        transform: translate(-50%, -50%);
                        border: 2px solid rgba(21, 96, 245, 1);
                        opacity: 0;
                        z-index: 1;
                    }
                    .desk::after {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        animation: desk1 1s infinite linear;
                    }
                    .panorama1 {
                        top: 16%;
                        left: 60.5%;
                    }
                    .panorama2 {
                        top: 10.5%;
                        left: 60.5%;
                    }
                    .panorama3 {
                        top: 19%;
                        left: 63%;
                    }
                    .desk1 {
                        top: 13.5%;
                        left: 58%;
                    }
                    .desk2 {
                        top: 13.5%;
                        left: 55.5%;
                    }
                    .desk3 {
                        top: 10%;
                        left: 58%;
                    }
                    .desk4 {
                        top: 10%;
                        left: 55.5%;
                    }
                    .desk5 {
                        top: 6.5%;
                        left: 58%;
                    }
                    .desk6 {
                        top: 6.5%;
                        left: 55.5%;
                    }
                    .desk7 {
                        top: 6.5%;
                        left: 62.3%;
                    }
                    .desk8 {
                        top: 10%;
                        left: 62.3%;
                    }
                    .desk9 {
                        top: 13.5%;
                        left: 62.3%;
                    }
                    img {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        padding: 10px;
                        cursor: pointer;
                        zoom: 1;
                    }
                }
                .close_btn {
                    width: 30px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    position: absolute;
                    top: 5px;
                    right: 5px;
                    border-radius: 50%;
                    color: #fff;
                    background-image: linear-gradient(to bottom, rgb(146, 178, 202), rgb(151, 150, 182));
                    cursor: pointer;
                }
                .plan-add {
                    position: absolute;
                    top: 10px;
                    left: 50%;
                    padding: 5px 15px;
                    font-size: 14px;
                    border-radius: 3px;
                    border: none;
                    background: #5d7bc8;
                    color: #fff;
                    cursor: pointer;
                }
            }
            .plan-text {
                width: 100%;
                height: 255px;
                display: flex;
                align-items: center;
                background: rgba(40, 70, 126, 0.75);
                border-bottom-right-radius: 3px;
                .plan-text-left {
                    width: 60%;
                    height: 100%;
                    padding-left: 20px;
                    h3 {
                        font-size: 20px;
                        color: #fff;
                        font-weight: 600;
                        padding: 20px 0px 10px 7px;
                        span {
                            font-size: 14px;
                            padding-left: 10px;
                        }
                    }
                    .plan-btn {
                        // border: 1px solid red;
                        ul {
                            display: flex;
                            align-items: center;
                            flex-wrap: wrap;
                            li {
                                width: 16.66%;
                                margin: 10px 0;
                                padding-left: 7px;
                                position: relative;
                                div {
                                    width: 61px;
                                    height: 38px;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    border-radius: 6px;
                                    background: rgba(95, 122, 190, 0.6);
                                    // background: red;
                                    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
                                    a {
                                        display: block;
                                        width: 52px;
                                        height: 32px;
                                        line-height: 32px;
                                        color: #fff;
                                        text-align: center;
                                        border-radius: 6px;
                                        font-size: 14px;
                                        background: rgba(95, 122, 190, 1);
                                        box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1);
                                        &:hover {
                                            background: rgba(127, 155, 226, 0.2);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                .plan-text-right {
                    flex: 1;
                    height: 100%;
                    padding: 0 25px;
                    position: relative;

                    &::before {
                        content: '';
                        position: absolute;
                        top: 52%;
                        transform: translateY(-50%);
                        left: 0;
                        height: 81%;
                        border-left: 3px dotted rgba(255, 255, 255, 0.2);
                    }
                    h3 {
                        font-size: 20px;
                        color: #fff;
                        font-weight: 600;
                        padding: 20px 0 10px;
                        span {
                            font-size: 14px;
                            padding-left: 10px;
                        }
                    }
                    .plan-room {
                        width: 100%;
                        height: 175px;
                        border-radius: 6px;
                        text-align: center;
                        position: relative;
                        // border: 1px solid red;
                        // background: rgb(229, 229, 229);
                        img {
                            height: 100%;
                        }
                        div {
                            position: absolute;
                            top: 0;
                            right: 10px;
                            width: 30px;
                            height: 30px;
                            // border: 1px solid red;
                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                }
            }
        }
        .plan-popup {
            width: 350px;
            // height: 220px;
            position: fixed;
            top: 35%;
            left: 60%;
            transform: translate(-50%, -50%);
            border-radius: 3px;
            z-index: 667;
            .plan-popup-title {
                width: 100%;
                height: 44px;
                display: flex;
                align-items: center;
                position: relative;
                background: rgba(242, 242, 242, 0.9);
                border-top-left-radius: 3px;
                border-top-right-radius: 3px;
                .icon {
                    font-size: 24px;
                    margin-left: 20px;
                    color: #999;
                    // transform: rotate(135deg);
                }
                h3 {
                    font-size: 16px;
                    margin-left: 20px;
                }
                .close {
                    position: absolute;
                    top: 5px;
                    right: 5px;
                    width: 30px;
                    height: 30px;
                    line-height: 30px;
                    border-radius: 50%;
                    font-size: 16px;
                    color: #f1f1f1;
                    text-align: center;
                    cursor: pointer;
                    background-image: linear-gradient(to bottom, rgb(146, 178, 202), rgb(151, 150, 182));
                }
            }
            .plan-popup-content {
                width: 100%;
                // height: 174px;
                display: flex;
                flex-direction: column;
                background: rgba(82, 102, 144, 0.9);
                border-bottom-left-radius: 3px;
                border-bottom-right-radius: 3px;
                ul {
                    display: flex;
                    flex-wrap: wrap;
                    padding: 0 30px;
                    margin: 10px 0;
                    li {
                        width: 50%;
                        font-size: 12px;
                        line-height: 20px;
                        color: #fff;
                        display: flex;
                        margin: 3px 0;
                        .form-control {
                            width: 55%;
                            background: transparent;
                            // border: 1px solid #ccc;
                            border: none;
                            // outline: 1px solid #ccc;
                            &:focus {
                                outline: none;
                            }
                        }
                        /deep/ .ant-calendar-picker {
                            position: relative;
                            width: 55%;
                            background: transparent;
                            border: none;
                            height: 20px;
                            padding: 0;
                            margin: 0;
                            // background: #ccc;
                            // border: 1px solid red;
                            div {
                                padding: 0;
                                margin: 0;
                                height: 100%;
                                line-height: 0;
                                // line-height: 10px;
                                input {
                                    height: 20px;
                                    padding: 0;
                                    margin: 0;
                                    color: #fff;
                                    background: transparent;
                                    border: none;
                                    line-height: 0;
                                    font-size: 12px;
                                    border: none;
                                }
                                .ant-calendar-picker-icon {
                                    display: none;
                                    border: 1px solid red;
                                }
                            }
                        }
                        /deep/ .ant-select {
                            width: 50%;
                            height: 20px;
                            .ant-select-selection {
                                width: 100%;
                                height: 100%;
                                background: transparent;
                                border: none;
                                outline: none;
                                border-radius: 0;
                            }
                            .ant-select-selection__rendered {
                                padding: 0;
                                // margin: 0;
                                margin-left: 3px;
                                line-height: 0;
                                width: 100%;
                                height: 100%;
                                // border: 1px solid blue;
                                .ant-select-selection-selected-value {
                                    padding: 9px 0 0 0;
                                    margin: 0;
                                    width: 100%;
                                    height: 100%;
                                    // line-height: 0;
                                    font-size: 12px;
                                    // border: 1px solid blue;
                                }
                            }
                            .ant-select-arrow {
                                color: #fff;
                            }
                        }
                    }
                }
                .plan-popup-btn {
                    width: 100%;
                    // padding: 10px 0;
                    margin-bottom: 10px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    div {
                        width: 58px;
                        height: 25px;
                        margin: 0 20px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 6px;
                        background: rgba(95, 122, 190, 0.6);
                        box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);

                        a {
                            display: block;
                            width: 53px;
                            height: 18px;
                            line-height: 18px;
                            color: #fff;
                            text-align: center;
                            border-radius: 6px;
                            font-size: 12px;
                            background: rgba(95, 122, 190, 1);
                            box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1);
                            .icon {
                                margin-right: 5px;
                                font-size: 12px;
                            }
                            &:hover {
                                background: rgba(134, 160, 226, 0.5);
                            }
                        }
                        // &:last-child {
                        //     background: rgba(236, 128, 141, 0.6);
                        //     a {
                        //         display: block;
                        //         width: 53px;
                        //         height: 18px;
                        //         line-height: 18px;
                        //         color: #fff;
                        //         text-align: center;
                        //         border-radius: 6px;
                        //         font-size: 12px;
                        //         background: rgba(236, 128, 141, 1);
                        //         box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1);
                        //         &:hover {
                        //             background: rgb(238, 143, 154, 0.5);
                        //         }
                        //     }
                        // }
                    }
                    .plan-remove {
                        width: 58px;
                        height: 25px;
                        margin: 0 20px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 6px;
                        background: rgba(236, 128, 141, 0.6);
                        box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
                        /deep/.ant-btn-dashed {
                            display: block;
                            width: 53px;
                            height: 18px;
                            // line-height: 1px;
                            color: #fff;
                            text-align: center;
                            border-radius: 6px;
                            font-size: 12px;
                            background: rgba(236, 128, 141, 1);
                            box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1);
                            padding: 0;
                            margin: 0;
                            border: none;
                            .icon {
                                margin-right: 5px;
                                font-size: 12px;
                            }
                            &:hover {
                                background: rgb(238, 143, 154, 0.5);
                            }
                        }
                    }
                }
            }
        }
        //全景
        .plan-iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 670;
            // border: 1px solid red;
            iframe {
                width: 100%;
                height: 100%;
                border: none;
            }
        }
    }
    //平面遮盖层
    .layer {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 2;
    }
}
@keyframes scaleout {
    0% {
        width: 20%;
        height: 20%;
        opacity: 0;

        // transform: scale(0.5);
        // -webkit-transform: scale(0.5);
        // box-shadow: 0 0 5px 5px rgba(21, 96, 245, 0.8);
    }

    50% {
        width: 70%;
        height: 70%;
        opacity: 1;
        // transform: scale(1);
        // -webkit-transform: scale(1);
        // box-shadow: 0 0 10px rgba(21, 96, 245, 0.8);
    }
    100% {
        width: 100%;
        height: 100%;
        opacity: 0;
    }
}
@keyframes desk1 {
    0% {
        top: -5px;
    }
    50% {
        top: 0px;
    }
    100% {
        top: -5px;
    }
}
</style>